<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="height: 100%;">
            <i class="el-icon-s-platform"></i>
            <span>经营数据</span>
            <div class="block" style=" float: right; height: 100;">
              <!-- <i>选择日期 ：

                          </i> -->
              <el-form label-width="80px" :inline="true" class="demo-form-inline">
                <el-form-item label="" size="small">
                  <div class="block">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="timeArr" type="daterange" clearable
                      range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="small" @click="search">筛选</el-button>
                  <el-button type="primary" size="small" @click="clearSearch">清空</el-button>

                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="text item businessDataItem">
            <div class="businessData" v-for="(project, index) in  businessData" :key="index"
              :style="{ background: project.hue }">
              <div class="businessText">
                <p>{{ project.sumName }}</p>
                <p>{{ project.sum }}</p>
              </div>
              <i :class=project.icon></i>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 统计页面 -->
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple statisticsHei  " style="height: 280px;">
          <el-card class="box-card circle-chart" style="width: 100% ; height: 100%;">
            <div slot="header" class="clearfix" style="width: 100% ; height: 100%;">
              <i class="el-icon-s-platform"></i>
              <span>订单统计</span>
            </div>
            <div class="text item" ref="options" style="height:180px;width: 330px;">

            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple statisticsHei" style="height: 280px;">
          <el-card class="box-card circle-chart" style="width: 100% ; height: 100%;">
            <div slot="header" class="clearfix">
              <i class="el-icon-s-platform"></i>
              <span>救援任务统计</span>
            </div>
            <div class="text item" ref="options2" style="height:180px;width: 330px;">

            </div>
          </el-card>
        </div>
      </el-col>
      <!-- 用户概况区域 -->
      <el-col :span="12">
        <div class="grid-content bg-purple statisticsHei" style="height: 280px;">
          <el-card class="box-card" style="width: 100% ; height: 100%;">
            <div slot="header" class="clearfix">
              <i class="el-icon-s-platform"></i>
              <span>用户概况</span>
            </div>
            <div class="text item  userProfile" style="height:160px;">
              <div v-for=" (item, index) in userProfile" :key="index">
                <p>{{ item.userTitle }}</p>
                <h4>{{ item.userValue }}</h4>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <!-- 注册用户分析页面 -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark " style="height: 330px;">
          <el-card class="box-card  foldingCards" style="height: 110%; text-align: center; margin-top: 25px; ">
            <div slot="header" class="clearfix  foldingCardsTitle">
              <span>用户概况</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <!-- 折线图 -->
            <div class="text item lineChart" ref="options3" style="width: 1500px; height: 110%;">

            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { dashboard } from "./DashBoardMixin";
export default {
  name: 'dashboard',
  mixins: [dashboard],
  data() {
    return {
      businessData: [
        { sumName: "今日订单总额 (元)", sum: "1000.00", icon: ["iconfont", "icon-dashangzonge"], hue: "#3ACD62" },
        { sumName: "今日订单总额", sum: "100", icon: ["iconfont", "icon-yewuzongshu"], hue: "#954BE6" },
        { sumName: "今日新增用户", sum: "265.66", icon: ["iconfont", "icon-ren"], hue: "#588BFB" },
        { sumName: "今日新增商户", sum: "265.66", icon: ["iconfont", "icon-xinzengyonghu"], hue: "#FA792B" },
      ],
      options: null,
      options2: null,
      options3: null,
      // 报错提示空对象无用
      pickerOptions: {},
      value2: "",
      // 报错提示空对象无用
      userProfile: [
        { userTitle: "商户数", userValue: "100" },
        { userTitle: "新用户户数", userValue: "50" },
        { userTitle: "累计商户数", userValue: "1000" }
      ],
      orderCount: [],
      orderOptions: {},
      rescueCount: [],
      rescueOptions: {},
      userCount: {
        userX: {},
        userY: {},
      },
      userOptions: {},
      timeArr: [],
    };
  },
  mounted() {
    this.getBusinessData();
  },
  methods: {
    async getBusinessData() {
      if (!this.endtime) {
        var starttime = undefined;
        var endtime = dayjs().format('YYYY-MM-DD');
      } else {
        var endtime = this.endtime;
        var starttime = this.starttime;
      }
      if (!starttime) {
        var query = this.$QS.stringify({ endtime });
      } else {
        var query = this.$QS.stringify({ starttime, endtime });
      }

      let PromiseAll = [];
      PromiseAll.push(this.$API.Dashboard.reqIndentCount(query));
      PromiseAll.push(this.$API.Dashboard.reqIndentMoney(query));
      PromiseAll.push(this.$API.Dashboard.reqUserByTime(query));
      PromiseAll.push(this.$API.Dashboard.reqMerchantByTime(query));
      PromiseAll.push(this.$API.Dashboard.reqUserCount(query));
      PromiseAll.push(this.$API.Dashboard.reqMerchantCount(query));
      PromiseAll.push(this.$API.Dashboard.reqIndentTypeCount(query));
      PromiseAll.push(this.$API.Dashboard.reqRescueCount(query));
      PromiseAll.push(this.$API.Dashboard.reqUserX(query));
      PromiseAll.push(this.$API.Dashboard.reqUserY(query));

      let resArr = await Promise.all(PromiseAll)
      if (resArr[0].code == 200) {
        this.businessData[1].sum = resArr[0].data;
      };
      if (resArr[1].code == 200) {
        this.businessData[0].sum = resArr[1].data;
      };
      if (resArr[2].code == 200) {
        this.businessData[2].sum = resArr[2].data;
      }
      if (resArr[3].code == 200) {
        this.businessData[3].sum = resArr[3].data;
      };
      if (resArr[4].code == 200) {
        this.userProfile[1].userValue = resArr[4].data;
        this.userProfile[2].userValue = resArr[4].data;
      }
      if (resArr[5].code == 200) {
        this.userProfile[0].userValue = resArr[5].data;
      };
      if (resArr[6].code == 200) {
        this.orderCount = resArr[6].data;
      };
      if (resArr[7].code == 200) {
        this.rescueCount = resArr[7].data;
      };
      if (resArr[8].code == 200) {
        this.userCount.userX = resArr[8].data;
      };
      if (resArr[9].code == 200) {
        this.userCount.userY = resArr[9].data;
      }
    },
    search() {
      this.getBusinessData();
    },
    clearSearch() {
      this.timeArr = [];
      this.getBusinessData();
    },
  }
}
</script>


<style scoped>
* {
  box-sizing: border-box;
}
.el-row {
  margin-bottom: 20px;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}

.schart {
  width: 100%;
  height: 300px;
}

.el-icon-s-platform {
  color: skyblue;
  font-size: 17px;
  margin-right: 10px;

}

/* 经营数据 */

/* 经营数据的最大盒子下边 */
.businessDataItem {
  display: flex;
}

/* 经营数据下的每个彩色项目 */
.businessData {
  flex: 1;
  margin-right: 100px;
  height: 120px;
  color: white;
  margin: 20px 100px 40px 0;
  display: flex;
  text-align: center;
  border-radius: 10px;
  text-shadow: 0 0 1px #ffffff, 0 0 1px #ffffff, 0 0 1px #fff;
}

.businessData div {
  flex: 2;
}

.businessData i {
  flex: 1;
  width: 25px;
  font-size: 35px;
  line-height: 119px;
}

/* 经营数据下面的文字和icon */
.businessText {
  display: flex;
  flex-direction: column;
  /* margin-left: 60px; */

}

.businessText p {
  flex: 1;
  width: 100%;
  line-height: 40px;
  /* margin-right: 20px; */
  text-align: center;
  width: 130px;
}

/* 统计页面公共样式 */
h4 {
  font-weight: 400;
}

/* 高度 */
.statisticsHei {
  height: 250px;
}

/*  userProfile" 用户概况区域 */

.userProfile {
  display: flex;
  text-align: center;
}

.userProfile>div {
  border: 1px solid rgba(36, 196, 4, 0.959);
  border-radius: 50px 0 50px 0;
  margin: 20px;
  flex: 1;
}

.userProfile>div p,
.userProfile>div h4 {
  height: 50%;
  line-height: 54px;
}

.userProfile>div h4 {
  font-size: 30px;
}

/* 注册用户分析 */


.foldingCards {
  /* transform: rotate(270deg);   */
  display: flex;
  width: 100%;
}

.foldingCardsTitle {
  width: 20px;
  padding-top: 130px;
  padding-right: 30px;
  height: 100%;
  border-right: 1px solid #e2e7f6;
}
</style>
  